<template>
  <div class="classdetail-table">
    <el-collapse v-model="activeName" accordion @change="handleChange">
      <template v-for="(item,index) in stageList">
        <el-collapse-item :key="index" :name="item.name">
          <template slot="title">
            <span class="left-content">
              <i class="el-icon-rank" />
              <span class="title">{{ item.name }}</span>
              <span class="title">共{{ item.children.length }}门</span>
            </span>
          </template>
          <div :key="index" class="subtitle">
            <span class="tip">阶段描述</span>
            {{ item.description }}
          </div>
          <ul class="detail-learn-subject">
            <template v-for="(child,childindex) in item.children">
              <li :key="childindex" class="detail-learn-subject-list">
                <el-row :gutter="20">
                  <el-col :span="5">
                    <img
                      v-if="child.imgUrl"
                      :src="child.imgUrl"
                      alt
                      style="width:100%;height:100%;"
                    />
                    <img
                      v-if="!child.imgUrl"
                      src="../../../../../../assets/subjectImg.png"
                      style="width:100%;"
                    />
                  </el-col>
                  <el-col :span="13">
                    <span class="content-title">{{ child.name }}</span>
                    <span
                      :style="child.assetsType === 'broadcast'? recordWay: onWay"
                      class="content-way"
                    >{{ child.assetsType === 'live' ? '直播' : '录播' }}</span>
                    <p style="color:#c6c6c7">{{ child.description }}</p>
                  </el-col>
                  <el-col :span="6">
                    <div class="right-wrap">
                      <span
                        class="class-detail"
                      >讲师:{{ child.teacherName }} | 课时: {{ child.duration }}</span>
                    </div>
                  </el-col>
                </el-row>
              </li>
            </template>
          </ul>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    stageList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      activeName: '1',
      recordWay: { backgroundColor: '#f89e29' },
      onWay: { backgroundColor: '#4297ff' }
    }
  },
  computed: {
    number() {
      return this.list.length
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss">
.classdetail-table {
  margin-top: 30px;
  .el-collapse {
    .el-collapse-item__header.is-active {
      background-color: #e4fafd;
    }
    .el-collapse-item__header {
      background-color: #f0f3ff;
      .left-content {
        display: block;
        height: 48px;
        line-height: 48px;
        float: left;
        padding-left: 15px;
        .title {
          margin-right: 20px;
          font-size: 18px;
          color: #585858;
        }
      }
    }
    .subtitle {
      width: 100%;
      height: 72px;
      line-height: 72px;
      font-size: 16px;
      color: #585858;
      .tip {
        padding: 5px 10px;
        background: #00b4d4;
        font-size: 16px;
        color: #fff;
        border-radius: 5px;
      }
    }
    .detail-learn-subject {
      padding: 0 25px;
      margin: 0;
      width: 100%;
      list-style: none;
      &-list {
        height: 180px;
        padding: 14px 14px 28px 14px;
        border: 1px solid #dcdfe6;
        border-radius: 3px;
        margin-bottom: 20px;
        .el-col {
          height: 150px;
          position: relative;
          span.content-way {
            position: absolute;
            bottom: 10px;
            color: #fff;
            font-size: 18px;
            padding: 5px 25px;
          }
          .right-wrap {
            width: 100%;
            height: 100%;
            position: relative;
            .class-detail {
              font-size: 18px;
              position: absolute;
              right: 0;
              top: 35%;
              color: #3d3d3d;
            }
            .class-manage {
              position: absolute;
              right: 0;
              bottom: 10px;
              .el-checkbox__label {
                color: #3d3d3d;
                font-size: 18px;
              }
              @media screen and (max-width: 1600px) {
                  /deep/.el-checkbox {
                    margin-right: 0;
                  }
                  .el-checkbox__label {
                      font-size: 16px
                  }
                  /deep/.el-button--medium {
                    padding: 7px 7px;
                  }
                }
            }
          }
        }
        .content-title {
          margin: 0;
          margin-top: 10px;
          margin-bottom: 5px;
          color: #3d3d3d;
          font-size: 18px;
          font-weight: 600;
        }
        p {
          margin: 0;
          font-size: 16px;
          color: #8a8b8c;
        }
      }
    }
  }
}
</style>
